<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增销售出库')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-chukuTest-add">
            <div class="form-group">    
                <label class="col-sm-3 control-label">发货单号：</label>
                <div class="col-sm-8">
                    <input name="fahuoDanhao" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">销售日期：</label>
                <div class="col-sm-8">
                    <div class="input-group date">
                        <input name="chukuDate" class="form-control" placeholder="yyyy-MM-dd" type="text"
                               th:value="${#dates.format(#calendars.createNow(), 'yyyy-MM-dd')}" required>
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                    </div>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">项目名称：</label>
                <div class="col-sm-8">
                    <input name="xiangmuName" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">业务员：</label>
                <div class="col-sm-8">
                    <input name="xiangmuMen" class="form-control" type="text" list="yewuyuan" th:value="${session.name4user}">
                    <datalist id="yewuyuan" th:with="type=${@shangpinxinxiMapper.selectShangPinName()}">
                        <option  th:each="lists : ${type}"
                                 th:text="${lists.getShangpinName()+' | '+lists.getKaiXiang()}"
                                 th:value="${lists.getShangpinName()}">
                        </option>
                    </datalist>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">发货人：</label>
                <div class="col-sm-8">
                    <input name="fahuoRen" class="form-control" list="fahuoren"
                           type="text" th:value="${@paibanMapper.selectPaibanName2Date(#dates.format(#calendars.createNow(), 'yyyy-MM-dd'))}">
<!--                    th:value="${@paibanMapper.selectPaibanByDate(#dates.format(#calendars.createNow(), 'yyyy-MM-dd')).getYuangongName()}"-->
                    <datalist id="fahuoren" th:with="type=${@xiaoshouChukuMapper.selectGendan2User()}">
                        <option  th:each="lists : ${type}"
                                 th:text="${lists}"
                                 th:value="${lists}">
                        </option>
                    </datalist>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">收货地址：</label>
                <div class="col-sm-8">
                    <input name="shouhuoDizhi" class="form-control" type="text">
<!--                    <datalist id="dizhi" th:with="type=${@shangpinxinxiMapper.selectShangPinName()}">-->
<!--                        <option  th:each="lists : ${type}"-->
<!--                                 th:text="${lists.getShangpinName()+' | '+lists.getKaiXiang()}"-->
<!--                                 th:value="${lists.getShangpinName()}">-->
<!--                        </option>-->
<!--                    </datalist>-->
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">配套类型：</label>
                <div class="col-sm-8">
                    <select class="form-control" onchange="change2down(this.value)" name="peitao1" th:with="type=${@dict.getType('sys_peitao')}" id="selected2peitao">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
                    </select>
                </div>
                <script type="text/javascript">
                    window.addEventListener('DOMContentLoaded', (event) => {
                        change2down("整套门")
                    });
                    function change2down(value) {
                        var menlist = document.getElementById("menlist")
                        var menlist2you = document.getElementById("menlist2you")
                        var menset = document.getElementById("mensetting")
                        var kuanglist = document.getElementById("kuanglist")
                        var kuangset = document.getElementById("kuangsetting")
                        var wujinlist = document.getElementById("wujinlist")
                        var zongjinelist = document.getElementById("zongjinelist")
                        var leixing2men = document.getElementById("leixing2men")
                        console.log(value)
                        switch (value) {
                            case "整套门":
                                menlist.hidden = false
                                menlist2you.hidden = true
                                menset.hidden = true
                                kuanglist.hidden = true
                                kuangset.hidden = true
                                wujinlist.hidden = true
                                zongjinelist.hidden = false
                                leixing2men.hidden = true
                                for (let i = 0; i < wujinlist.getElementsByTagName("input").length; i++) {
                                    wujinlist.getElementsByTagName("input")[i].value = null
                                }
                                for (let i = 0; i < kuanglist.getElementsByTagName("input").length; i++) {
                                    kuanglist.getElementsByTagName("input")[i].value = null
                                }
                                for (let i = 0; i < menlist2you.getElementsByTagName("input").length; i++) {
                                    menlist2you.getElementsByTagName("input")[i].value = null
                                }
                                document.querySelector('input[id="input4name1"]').setAttribute("list","namelist1")
                                break
                            case "门扇门框配套":
                                menlist.hidden = false
                                menlist2you.hidden = true
                                menset.hidden = false
                                kuanglist.hidden = false
                                kuangset.hidden = false
                                wujinlist.hidden = true
                                zongjinelist.hidden = false
                                leixing2men.hidden = false
                                for (let i = 0; i < wujinlist.getElementsByTagName("input").length; i++) {
                                    wujinlist.getElementsByTagName("input")[i].value = null
                                }
                                for (let i = 0; i < menlist2you.getElementsByTagName("input").length; i++) {
                                    menlist2you.getElementsByTagName("input")[i].value = null
                                }
                                document.querySelector('input[id="input4name1"]').setAttribute("list","namelist2")
                                break
                            case "单订门扇":
                                menlist.hidden = false
                                menlist2you.hidden = true
                                menset.hidden = false
                                kuanglist.hidden = true
                                wujinlist.hidden = true
                                zongjinelist.hidden = false
                                leixing2men.hidden = true
                                for (let i = 0; i < wujinlist.getElementsByTagName("input").length; i++) {
                                    wujinlist.getElementsByTagName("input")[i].value = null
                                }
                                for (let i = 0; i < kuanglist.getElementsByTagName("input").length; i++) {
                                    kuanglist.getElementsByTagName("input")[i].value = null
                                }
                                for (let i = 0; i < menlist2you.getElementsByTagName("input").length; i++) {
                                    menlist2you.getElementsByTagName("input")[i].value = null
                                }
                                document.querySelector('input[id="input4name1"]').setAttribute("list","namelist2")
                                break
                            case "单订门框":
                                menlist.hidden = true
                                menlist2you.hidden = true
                                kuanglist.hidden = false
                                kuangset.hidden = false
                                wujinlist.hidden = true
                                zongjinelist.hidden = false
                                leixing2men.hidden = true
                                for (let i = 0; i < wujinlist.getElementsByTagName("input").length; i++) {
                                    wujinlist.getElementsByTagName("input")[i].value = null
                                }
                                for (let i = 0; i < menlist.getElementsByTagName("input").length; i++) {
                                    menlist.getElementsByTagName("input")[i].value = null
                                }
                                for (let i = 0; i < menlist2you.getElementsByTagName("input").length; i++) {
                                    menlist2you.getElementsByTagName("input")[i].value = null
                                }
                                document.querySelector('input[id="input4name1"]').setAttribute("list","namelist3")
                                break
                            case "仅五金出入":
                                menlist.hidden = true
                                menlist2you.hidden = true
                                kuanglist.hidden = true
                                wujinlist.hidden = false
                                zongjinelist.hidden = false
                                leixing2men.hidden = true
                                for (let i = 0; i < menlist.getElementsByTagName("input").length; i++) {
                                    menlist.getElementsByTagName("input")[i].value = null
                                }
                                for (let i = 0; i < kuanglist.getElementsByTagName("input").length; i++) {
                                    kuanglist.getElementsByTagName("input")[i].value = null
                                }
                                for (let i = 0; i < menlist2you.getElementsByTagName("input").length; i++) {
                                    menlist2you.getElementsByTagName("input")[i].value = null
                                }
                                var div1 = document.getElementById("fanghuosuolist")
                                var div2 = document.getElementById("bimenqilist")
                                var div3 = document.getElementById("labaogailist")
                                div1.hidden = false
                                div2.hidden = false
                                div3.hidden = false
                                break
                            default:
                                break
                        }
                    }
                </script>
            </div>
            <div class="form-group" id="leixing2men">
                <label class="col-sm-3 control-label">防火门类型：</label>
                <div class="col-sm-8">
                    <select class="form-control" id="danshuangkai">
                        <option value="单开门" id="dankai" onclick="menSet(this.value)">单开门</option>
                        <option value="双开门" id="shuangkai" onclick="menSet(this.value)">双开门</option>
                    </select>
                </div>
                <script>
                    function menSet(value) {
                        const menlist2you = document.getElementById("menlist2you");
                        if (value === "单开门"){
                            menlist2you.hidden = true
                            document.querySelector('input[id="input4name1"]').setAttribute("list","namelist2")
                            document.querySelector('input[id="input4name3"]').setAttribute("list","kuangming1")
                        }
                        if (value === "双开门"){
                            menlist2you.hidden = false
                            document.querySelector('input[id="input4name1"]').setAttribute("list","namelist4")
                            document.querySelector('input[id="input4name3"]').setAttribute("list","kuangming2")
                        }
                    }
                </script>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">配套类型：</label>
                <div class="col-sm-8">
                    <select class="form-control" name="peitao2" onchange="wujinReSet(this.value)">
                        <option value="常规五金配套" id="changgui">常规五金配套</option>
                        <option value="单要防火锁" id="danwujin1">单要防火锁</option>
                        <option value="单要闭门器" id="danwujin2">单要闭门器</option>
                        <option value="单要拉爆盖" id="danwujin3">单要拉爆盖</option>
                        <option value="不含五金" id="noWujin">不含五金</option>
                    </select>
                </div>
                <script type="text/javascript">
                    function wujinReSet(value) {
                        const wujinlist = document.getElementById("wujinlist");
                        var selected2 = document.getElementById("selected2peitao")

                        var div1 = document.getElementById("fanghuosuolist")
                        var div2 = document.getElementById("bimenqilist")
                        var div3 = document.getElementById("labaogailist")
                        if (value === "常规五金配套" && selected2.value !== "仅五金出入"){
                            wujinlist.hidden = true
                            for (let i = 0; i < wujinlist.getElementsByTagName("input").length; i++) {
                                wujinlist.getElementsByTagName("input")[i].value = null
                            }
                        }
                        if (value === "单要防火锁"){
                            wujinlist.hidden = false

                            div1.hidden = false
                            div2.hidden = true
                            div3.hidden = true
                        }
                        if (value === "单要闭门器"){
                            wujinlist.hidden = false
                            div1 = document.getElementById("fanghuosuolist")
                            div2 = document.getElementById("bimenqilist")
                            div3 = document.getElementById("labaogailist")
                            div1.hidden = true
                            div2.hidden = false
                            div3.hidden = true
                        }
                        if (value === "单要拉爆盖"){
                            wujinlist.hidden = false
                            div1 = document.getElementById("fanghuosuolist")
                            div2 = document.getElementById("bimenqilist")
                            div3 = document.getElementById("labaogailist")
                            div1.hidden = true
                            div2.hidden = true
                            div3.hidden = false
                        }
                        if (value === "不含五金"){
                            wujinlist.hidden = true
                            for (let i = 0; i < wujinlist.getElementsByTagName("input").length; i++) {
                                wujinlist.getElementsByTagName("input")[i].value = null
                            }
                        }
                    }
                </script>
            </div>
            <div id="menlist">
            <div class="form-group">
                <label class="col-sm-3 control-label">门扇名称：</label>
                <div class="col-sm-8">
                    <input name="goodNameMen1" onchange="men1set(this.value)" class="form-control" type="text" list="namelist1" id="input4name1">
                </div>
                <datalist id="namelist1" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%整套门%')}">
                    <option  th:each="lists : ${type}"
                             th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                             th:text="${lists.getShangpinName()}">
                    </option>
                </datalist>
                <datalist id="namelist2"  th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%门扇%')}">
                    <option  th:each="lists : ${type}"
                             th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                             th:text="${lists.getShangpinName()}">
                    </option>
                </datalist>
                <datalist id="namelist3" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%门框%')}">
                    <option  th:each="lists : ${type}"
                             th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                             th:text="${lists.getShangpinName()}">
                    </option>
                </datalist>
                <datalist id="namelist4" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%左扇%')}">
                    <option  th:each="lists : ${type}"
                             th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                             th:text="${lists.getShangpinName()}">
                    </option>
                </datalist>
                <script type="text/javascript">
                    function men1set(value) {
                        var str = value.split(" | ")[1]
                        var kaixiang = value.split(" | ")[2]
                        var kuan = str.split("*")[0]
                        var gao = str.split("*")[1]
                        document.getElementById("guiGeKuan1").value = kuan
                        document.getElementById("guiGeGao1").value = gao
                        document.getElementById("kaiXiang1").value = kaixiang
                        document.getElementById("input4name1").value = value.split(" | ")[0]
                    }
                </script>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">防火门备注：</label>
                <div class="col-sm-8">
                    <input name="beizhu1" class="form-control" type="text">
                </div>
            </div>
                <div id="mensetting">
            <div class="form-group">
                <label class="col-sm-3 control-label">门扇宽：</label>
                <div class="col-sm-8">
                    <input name="men1shanKuan" class="form-control" type="text" id="guiGeKuan1">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">门扇高：</label>
                <div class="col-sm-8">
                    <input name="men1shanGao" class="form-control" type="text" id="guiGeGao1">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">开向：</label>
                <div class="col-sm-8">
                    <input name="kaiXiang1"  class="form-control" type="text" id="kaiXiang1">
                </div>
            </div>
                </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label">门扇数量：</label>
                <div class="col-sm-8">
                    <input name="men1Shuliang" class="form-control" type="text" value="1" onchange="shuliangSet(this.value)">
                    <script type="text/javascript">
                        function shuliangSet(value) {
                            if ($("select[id='selected2peitao']").val() === "门扇门框配套"){
                                if ($("select[id='danshuangkai']").val() === "单开门"){
                                    document.getElementById("kuangshu").value = value
                                }else {
                                    document.getElementById("youmenshu").value = value
                                    document.getElementById("kuangshu").value = value
                                }

                            }
                        }
                    </script>
                </div>
            </div>
            </div>
            <div id="menlist2you">
                <div class="form-group">
                    <label class="col-sm-3 control-label">右扇名称：</label>
                    <div class="col-sm-8">
                        <input name="goodNameMen2" onchange="men2set(this.value)" class="form-control" type="text" list="youlist" id="input4name2">
                        <datalist id="youlist" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4Name('%右扇%')}">
                            <option  th:each="lists : ${type}"
                                     th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                                     th:text="${lists.getShangpinName()}">
                            </option>
                        </datalist>
                        <script type="text/javascript">
                            function men2set(value) {
                                var str = value.split(" | ")[1]
                                var kaixiang = value.split(" | ")[2]
                                var kuan = str.split("*")[0]
                                var gao = str.split("*")[1]
                                document.getElementById("guiGeKuan2").value = kuan
                                document.getElementById("guiGeGao2").value = gao
                                document.getElementById("kaiXiang2").value = kaixiang
                                document.getElementById("input4name2").value = value.split(" | ")[0]
                            }
                            function kuang2set(value) {
                                var str = value.split(" | ")[1]
                                var kaixiang = value.split(" | ")[2]
                                var kuan = str.split("*")[0]
                                var gao = str.split("*")[1]
                                document.getElementById("guiGeKuan3").value = kuan
                                document.getElementById("guiGeGao3").value = gao
                                document.getElementById("kaiXiang3").value = kaixiang
                                document.getElementById("input4name3").value = value.split(" | ")[0]
                            }
                        </script>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">门扇规格宽：</label>
                    <div class="col-sm-8">
                        <input id="guiGeKuan2" name="men2shanKuan" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">门扇规格高：</label>
                    <div class="col-sm-8">
                        <input id="guiGeGao2" name="men2shanGao" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">门扇开向：</label>
                    <div class="col-sm-8">
                        <input id="kaiXiang2" name="kaiXiang2" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">右扇数量：</label>
                    <div class="col-sm-8">
                        <input name="men2Shuliang" id="youmenshu" class="form-control" type="text" value="1">
                    </div>
                </div>
            </div>
            <div id="kuanglist">
            <div class="form-group">    
                <label class="col-sm-3 control-label">门框名称：</label>
                <div class="col-sm-8">
                    <input id="input4name3" name="goodNameKuang" onchange="kuang2set(this.value)" class="form-control" type="text" list="kuangming1">
                    <datalist id="kuangming1" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4noshuangkai()}">
                        <option  th:each="lists : ${type}"
                                 th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                                 th:text="${lists.getShangpinName()}">
                        </option>
                    </datalist>
                    <datalist id="kuangming2" th:with="type=${@shangpinxinxiMapper.selectShangpinxinxi2LeiBie4shuangkai()}">
                        <option  th:each="lists : ${type}"
                                 th:value="${lists.getShangpinName()+' | '+lists.getGuiGeKuan()+'*'+lists.getGuiGeGao()+' | '+lists.getKaiXiang()}"
                                 th:text="${lists.getShangpinName()}">
                        </option>
                    </datalist>
                </div>
            </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">门框数量：</label>
                    <div class="col-sm-8">
                        <input id="kuangshu" name="kuangShuliang" class="form-control" type="text" value="">
                    </div>
                </div>
                <div id="kuangsetting">
            <div class="form-group">
                <label class="col-sm-3 control-label">门框宽：</label>
                <div class="col-sm-8">
                    <input id="guiGeKuan3" name="kuangKuan" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">门框高：</label>
                <div class="col-sm-8">
                    <input id="guiGeGao3" name="kuangGao" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">门框开向：</label>
                <div class="col-sm-8">
                    <input name="kaiXiang3" id="kaiXiang3" class="form-control" type="text">
                </div>
            </div>
            </div>
            </div>
            <div id="wujinlist">
                <div id="fanghuosuolist">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">防火锁数量：</label>
                        <div class="col-sm-8">
                            <input name="shuliang1" class="form-control" type="text" value="1">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">防火锁备注：</label>
                        <div class="col-sm-8">
                            <input name="beizhu2" class="form-control" type="text">
                        </div>
                    </div>
                </div>
            <div id="bimenqilist">
                <div class="form-group">
                    <label class="col-sm-3 control-label">闭门器数量：</label>
                    <div class="col-sm-8">
                        <input name="shuliang2" class="form-control" type="text" value="1">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">闭门器备注：</label>
                    <div class="col-sm-8">
                        <input name="beizhu3" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div id="labaogailist">
                <div class="form-group">
                    <label class="col-sm-3 control-label">拉爆盖数量：</label>
                    <div class="col-sm-8">
                        <input name="shuliang3" class="form-control" type="text" value="6">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">拉爆盖备注：</label>
                    <div class="col-sm-8">
                        <input name="beizhu4" class="form-control" type="text">
                    </div>
                </div>
            </div>
            </div>
            <div id="zongjinelist" class="form-group">
                <label class="col-sm-3 control-label">总金额：</label>
                <div class="col-sm-8">
                    <input name="zongjine" id="zongjine" class="form-control" type="text">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "xiaoshouchuku/chukuTest"
        $("#form-chukuTest-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-chukuTest-add').serialize());
            }
        }

        $(".file-upload").fileinput({
            uploadUrl: ctx + 'common/upload',
            maxFileCount: 1,
            autoReplace: true
        }).on('fileuploaded', function (event, data, previewId, index) {
            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
        }).on('fileremoved', function (event, id, index) {
            $("input[name='" + event.currentTarget.id + "']").val('')
        })

        $("input[name='chukuDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    </script>
</body>
</html>